<template>
  <div id="home">
    <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
    <home-swiper :cbanners="banners" />
    <recommend-view :recommmends="commend" />
    <feature />
    <tab-control :titles="['流行','新款','精选']" @tabclick="ztabclick"/>
    <good-list :goods="showGoods"></good-list>
    
  </div>
</template>

<script>
//编程规范,写组件试要分离，导入组件时也可以规范一下，子组件放一起，公共的组件放一块，方法放一起
//进行分类
//子组件
import HomeSwiper from "./childComps/HomeSwiper.vue"; //轮播
import RecommendView from "./childComps/RecommendView.vue";
import Feature from "@/views/home/childComps/Feature";
//公共组件
import NavBar from "components/common/navbar/NavBar";
import TabControl from "@/components/content/tabControl/TabControl";
import GoodList from "@/components/content/goods/GoodList";


import { getHomeMultidata,getHomeGoods } from "@/network/home"; //网络请求

export default {
  name: "Home",
  components: {
    HomeSwiper,
    RecommendView,
    Feature,

    NavBar,
    TabControl,
    GoodList
  },
  data() {
    return {
      banners: [],
      commend: [],
      goods:{
        'pop':{page:0,list:[]},
        'new':{page:0,list:[]},
        'sell':{page:0,list:[]}
      },
      currentType:"pop"
    };
  },
  computed:{
    showGoods(){
      return this.goods[this.currentType].list
    }
  },


  //组件创建完的时候发送请求，周期函数
  //希望放的是主要逻辑
  created() {
    //返回的是Promise
    this.getHomeMultidata()//调用了methods里的getHomeMultidata
    //请求商品数据r
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')
  },
  methods:{
    // 事件监听
    ztabclick(index){//子传父的自定义事件
      switch(index){
        case 0:
          this.currentType='pop'
          break;
        case 1:
          this.currentType='new'
          break;
        case 2:
          this.currentType='sell'
          break;
      }
    },
    // 网络请求
    getHomeMultidata(){
      getHomeMultidata().then(res => {
      this.banners = res.data.banner.list;
      this.commend = res.data.recommend.list;
      });
    },
    getHomeGoods(type){
      //可以使用点引用属性，也可以使用['属性名']引用
      //原本的goods[type].page并没有因为下面而改变
      const page =this.goods[type].page+1
      getHomeGoods(type,page).then(res=>{
        console.log(res);
        this.goods[type].list.push(...res.data.list)
        this.goods[type].page +=1
      })
    }
  }
};
</script>

<style scoped>
.home-nav {
  background-color: var(--color-tint);
  color: rgb(20, 13, 13);
  position: sticky;
  top: 0;
  z-index: 999;
}
/* 不应该给组件加，谁使用组件谁加属性 */
.tab-control {
  position: sticky;
  top: 44px;
  z-index: 10;
}
</style>